<template>
	<view>
		<view>
			<view style="position: relative;">
				<view style="position: absolute;z-index: 9999;
					top: 40rpx;right: 40rpx;font-weight: 800;">
					<i class="iconfont icon-tuichu" @click.prevent="logout"></i>
				</view>
				<view style="position: absolute;z-index: 999;
				background-color: rgba(0, 0, 0, 0.1);width: 100%;height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction:column
				">
					<view style="width: 132rpx;height: 132rpx;border-radius: 100%;
					background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;">
						<image
						style="width: 120rpx;height: 120rpx;border-radius: 100%;"
						:src="vuex_user.avatar"></image>
					</view>
					<view style="color: #fff;display: block;margin-top: 10rpx;font-size: 16px;">
						{{vuex_user.user_name}}
					</view>
				</view>
				<image :src="bgImage" style="width: 100%;height: 400rpx;"></image>
			</view>
			<view class="rowClass">
				<u-row>
					<u-col span="4" text-align="center" v-for="(item,index) in navList" :key="index">
						<view class="u-padding-20" @tap="clickNav(item)" hover-class="hoverClass">
							<i class="iconfont" :class="item.icon"></i>
							<view class="tabName">{{item.name}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImage: '/static/img/index/swiper/swiper1.jpg',
				navList:[
				   {name:"我的收藏",src:"/static/img/index/cover_2022/index_cover1.png",icon:"icon-star",url:"/pages/center/heart"},
				   {name:"我的项目",src:"/static/img/index/cover_2022/index_cover2.png",icon:"icon-hetong",url:"/pages/center/contract"},
				   {name:"我的评价",src:"/static/img/index/cover_2022/index_cover3.png",icon:"icon-pingjia",url:"/pages/center/evaluate"},
				   // {name:"我的客服",src:"/static/img/index/cover_2022/index_cover4.png",icon:"icon-kefu",url:"/pages/center/customer"}
				],
			}
		},
		onLoad() {
			this.checkToken()
		},
		onUnload() {
			
		},
		methods: {
			clickNav(item){
				if(item.url){
					return this.$u.route(item.url);
				}
			},
			logout(){
				// 登录成功修改token与用户信息
				this.$u.vuex('vuex_token', '');
				this.$u.vuex('vuex_user', {});
				return uni.reLaunch({
					url:'../index/index'
				})
			},
			checkToken(){
				// 判断是否有token
				let lifeData = uni.getStorageSync('lifeData');
				let token = lifeData.vuex_token
				if(!token){
					// 没有token 则跳转到登录
					return uni.reLaunch({
						url:'../login/login'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rowClass{
		background-color: rgb(255, 255, 255);
	}
	
	.hoverClass{
		background-color: #E4E7ED;
	}
	
	.tabName{
		font-size: 14px;
		color: $u-tips-color;
	}
</style>
